<template>
	<view class="content">
		<page-meta>
		    <navigation-bar
		      :title="Name"
		      :title-icon="titleIcon"
		      :title-icon-radius="titleIconRadius"
		      :subtitle-text="subtitleText"
		      :subtitle-color="nbFrontColor"
		      :loading="nbLoading"
		      :front-color="nbFrontColor"
		      :background-color="nbBackgroundColor"
		      :color-animation-duration="2000"
		      color-animation-timing-func="easeIn"
		    />
		</page-meta> 
		
		<view class="allInfo">
			<view class="gatewayView">
				<!-- <view class="jalaImage">
					<u-image width="100%" height="300rpx" :src="src"></u-image>
				</view> -->
				<view class="powerView">
					<u-row gutter="16">
						<u-col span="6">
							<view class="demo-layout bg-purple">
								用电量：{{ this.energy }}  kw.h
							</view>
						</u-col>
						<u-col span="6">
							<view class="bRight">
								功率：{{ this.power }} kw
							</view>
						</u-col>
					</u-row> 
				</view>
			</view>
			
			<view class="mainView">
				<view v-for="(item, index) in indexList" :key="index" > 
					<view class="list-cell"> 
						<view class="wrap">
							<u-row gutter="6">
								<u-col span="4">
									<view class="demo-layout bg-purple">
										 <text>设备名称：</text>
										  {{ item.name }}
									</view>
								</u-col>
								<u-col span="3">
									<view class="demo-layout bg-purple-light">
										<text>通讯地址：</text>
										  {{ item.lineNo }}
									</view>
								</u-col>
								<u-col span="3">
									<view class="demo-layout bg-purple-dark" >
										<u-switch v-model="item.checkedStatus" @click="switchON(item)"></u-switch>
									</view>
								</u-col>
								<u-col span="2" @click="LineNoSet(item)">
									<view class="demo-layout bg-purple-dark">
										 <u-icon name="arrow-right"></u-icon>
									</view>
								</u-col>
							
							</u-row>
						</view>
					</view>
					 
				</view>
			</view>
			
			
			<view class="">
				<view class="buttonView">
					<button type="primary" shape="square"  @click="goTogateway">
						网关详情
					</button>
				</view>
				<view class="buttonView">
					<button type="primary" shape="square"  @click="allON">
						设备全开
					</button>
				</view>
				
				<view class="buttonView">
					<button type="primary" shape="square"  @click="allOFF">
						设备全关
					</button>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		// 在 页面接受参数
		onLoad: function (option) {
			console.log(option.SN,111);
			this.SN = option.SN;
			this.Name = option.Name
		},
		data() {
			return {
				
				Name:"",
				SN:"",
				//  
				mobile: '',
				code: '',
				list:'',
				nbTitle: '网关下线路信息',
				titleIcon: '/static/logo.png',
				titleIconRadius: '20px',
				subtitleText: 'subtitleText',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#ffffff',
				//  
				
				energy:"1385kw",
				power:"2302",
				 
				src:"https://www.jalasmart.com/uploads/allimg/190820/1-1ZR0144310.png",
				indexList:[{
					name:"线路1",
					lineNo:1,
					type:"wifi",
					lineID:"1123456",
					checkedStatus:true
				},{
					name:"线路2",
					lineNo:2,
					type:"4G",
					lineID:"33456789",
					checkedStatus:false
				},{
					name:"线路3",
					lineNo:3,
					type:"LAN",
					lineID:"44567890",
					checkedStatus:false
				}
				
				]
			}
		},
		methods: {
			LineNoSet(item){ 
				console.log(item);
				let lineNo = item.lineNo;
				let lineID = item.lineID;
				console.log(lineNo,lineID);
				 
				uni.navigateTo({
					url:"../lineDetail/lineDetail?lineID="+lineID+"+&lineNO="+lineNo
				}) 
			},
			switchON(item){
				console.log(item,"线路 ", " 请求开关");
			},
			allON(){
				console.log( "线路 ",  " 全部开");
				var statusAll = this.indexList;
				for (let i=0;i<= statusAll.length;i++) {
					statusAll[i].checkedStatus = true;
				}
			},
			allOFF(){
				console.log("线路 " ,"全关");
				let statusAll = this.indexList;
				for (let i=0;i<= statusAll.length;i++) {
					statusAll[i].checkedStatus = false;
				}
				 
			},
			
			
			
			// 跳转到网关详细
			goTogateway(){
				uni.navigateTo({
					url:"../gatewayInfo/gatewayInfo?SN="+this.SN+"+&Name="+this.Name
				})
			}
			
			
			
			
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		width: 100%;
		height: 100%; 
		padding-bottom: 1cm;
		padding-top: 10px;
	}
	.allInfo{
		width: 100%;
		position: relative;
	}
	.gatewayView{ 
		margin: 0 20px;
		color: blue;
	}
 
	.jalaImage{ 
		height: 190px;
		padding: 10px;
		background-color: lightgray;
	}
	.bRight{ 
		text-align: center;
	}
	
	.mainView{
		margin-top: 20px;
	}
	.wrap {
		padding: 24rpx;
	}
	.u-row {
		margin: 40rpx 0;
	}
	.buttonView{
		width: 100px;
		display: inline-block;
		margin: 10px;
	}
	 .buttonView>button{
		 border-radius: 20px;
	 }
	
</style>
